<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>


</head>
<style>
    *{
padding: 0;
margin: 0;
}
html{
font-size: 62.5%;
}
#bgView {
position: fixed;
width: 100%;
right: 0;
bottom: 0;
left: 0;
top: 0;
background-image: url("./assets/loginBg.png");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
input::-webkit-input-placeholder { /* WebKit browsers */ 

color: white; 

} 
#logoView {
margin: 60px auto;
width: 70px;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
#logoView img {
text-align: center;
}
.phoneImg {
  width: 11.6px;
vertical-align: middle;
height: 13.8px;
}
.phoneImg_1{
width: 11.6px;
vertical-align: middle;
height: 13.8px;

}
.phoneInput {
margin-left: 10px;
background: none;
border: none;
color: white;
vertical-align: middle;
}
#userView {
width: 77.3%;
height: 30px;
margin: 0 auto;
text-align: left;
padding-left: 34px;
border-bottom: 1px solid #D5DAED;
margin-top: 106.5px;
}
#pswordView {
width: 77.3%;
height: 30px;
margin: 20px auto;
text-align: left;
padding-left: 34px;
border-bottom: 1px solid #D5DAED;
margin-bottom: 50px;
}
.validateCode {
float: right;
border: 1px solid white;
height: 20px;
width: 80px;
text-align: center;
line-height: 20px;
border-radius: 5px;
background: white;
font-size: 10px;
color: #300D75;
letter-spacing: 1.16px;
}
#submitView {
margin-top: 52px;
width: 76%;
text-align: center;
height: 43px;
line-height:43px;
font-size: 14px;
border-radius: 20px;
background: white;
margin: 0 auto;
letter-spacing: 1.72px;
color: #300D75;
letter-spacing: -0.06px;
}
</style>

<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./vue.min.js"></script>
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src='./set.js'></script>
    <div id="wrapp">
        <div id="bgView">
            <div id="logoView">
                <img src="./assets/yunchao.png" alt="logo">
            </div>
            <div id="userView">
                <img src="./assets/username.png" alt="" class="phoneImg">
                <input type="number" placeholder="请输入手机号" class="phoneInput" style="outline:none;" v-model="phoneNum">
            </div>

            <div id="pswordView">
                <img src="./assets/psword.png" alt="" class="phoneImg_1">
                <input type="text" placeholder="请输入验证码" class="phoneInput" style="outline:none;" v-model="codeValue">
                <div class="validateCode" @click="code" v-if='phoneNum'>
                    <span class="tip" v-if="!sendMsgDisabled && !reGet">发送验证码</span>
                    <span class="tip" v-if="!sendMsgDisabled && reGet">重新获取</span>
                    <span class="tip" v-if="sendMsgDisabled">{{rTime+'(s)'}}</span>
                </div>
                <div class="validateCode" v-else style="background:gray;border: 1px solid gray">发送验证码</div>

            </div>
            <div id="submitView" @click="sure" v-if='phoneNum&&codeValue'>确认</div>
            <div id="submitView" v-else style="background:gray">确认</div>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#wrapp",
            data: {
                phoneNum: "",
                codeValue: "",
                sendMsgDisabled: false,
                reGet: false,
                rTime: 60,
            },
            methods: {
                //给后台发送手机号和验证码(缺少跳转的地址)
                sure() {
                    if (!this.phoneNum) {
                        alert("请填写手机号码");
                        return;
                    }
                    if (this.phoneNum.length != 11) {
                        alert("手机号码填写有误");
                        return;
                    }
                    if (!this.codeValue) {
                        alert("请填写您的验证码");
                        return;
                    }
                    let param = {};
                    param["userid"] = this.phoneNum;
                    param["smscode"] = this.codeValue;
                    axios({
                        method: "post",
                        url: requestBaseUrl + "tianru/users/login",
                        data: param,

                    })
                        .then(res => {
                            if (res.status == 200) {
                                console.log(res.data)
                                let session = res.data.session;
                                console.log(this.phoneNum)
                                if (res.data.retcode == 00000) {

                                    window.location.href = appUrl + "login.html?session=" + session;
                                } else if (res.data.retcode == 00002) {
                                    alert("请求超时");
                                }
                                else if (res.data.retcode == 00003) {
                                    alert("服务器错误");
                                }
                                else if (res.data.retcode == 00004) {
                                    alert("短信码错误");
                                }
                                else if (res.data.retcode == 00005) {
                                    alert("验证超时");
                                }
                                else if (res.data.retcode == 00006) {
                                    alert("验证码过期");
                                } else if (res.data.retcode == "00009") {
                                    alert("验证码过期1111");
                                    // window.location.href = "http://www.valuechain.group/template/MiningMachine/index.html?session="+session;
                                } else {
                                    alert("系统繁忙，请稍后重试");
                                }
                            }
                        }).catch(err => {
                            // alert("网络连接错误");
                        });

                },
                //点击发送验证码
                code() {
                    console.log(2343)
                    let param = {};
                    param["userid"] = this.phoneNum;
                    axios({
                        method: "post",
                        url: requestBaseUrl + 'tianru/users/sms',
                        data: param,
                    })
                        .then(res => {
                            if (res.status == 200) {
                                if (res.data.retcode == '00000') {
                                    app.sendMsgDisabled = true;
                                    let rTime = app.rTime;
                                    // 倒计时
                                    let interval = window.setInterval(() => {
                                        if (--app.rTime <= 0) {
                                            app.rTime = rTime;
                                            app.sendMsgDisabled = false;
                                            app.reGet = true; // 重新获取按钮
                                            window.clearInterval(interval);
                                        }
                                    }, 1000);
                                } else if (!res.data.retcode) {
                                    alert("系统繁忙,请稍后重试");
                                } else {
                                    alert("手机号码或验证码有误");
                                }
                            } else {
                                alert("系统繁忙,请稍后重试");
                            }
                        })
                        .catch(err => {
                            // alert("网络连接错误");
                        });
                }
            }
        })
    </script>
</body>

</html>